import { ListPage } from "custom/index";
import { getCustomerSubAccountPage, revokeSubAccount, deleteSubAccount } from './api'
import { dispatchAccountDialog, temporaryHandlerDialog, dispatchAccountAllDialog, dispatchEditDialog, dispatchLogDialog } from './dialog'
import LinkColumn from '@/components/table-column/LinkColumn.vue'
import { searchStatusOption } from './constant'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from "dayjs";

const level1 = ['_index', 'customerName']
const level2 = ['platformName', 'shopName', 'shopGroup', 'shopTypeName', 'serviceShiftName', 'customTypeName', 'consultPeopleNum', 'conversionRate', 'responseSecond']
const level3 = ['accountName']
const spanMethod = ({ row, column }) => {
  if (level1.includes(column.property)) {
    return {
      rowspan: row.rowspan1,
      colspan: row.colspan1
    }
  } else if (level2.includes(column.property)) {
    return {
      rowspan: row.rowspan2,
      colspan: row.colspan2
    }
  } else if (level3.includes(column.property)) {
    return {
      rowspan: row.rowspan3,
      colspan: row.colspan3
    }
  }
}

export async function revoke(ctx) {
  const row = ctx.props.row
  await ElMessageBox.confirm(`是否确定撤销？`, '提示')
  revokeSubAccount({
    subAccountId: row.subAccountId
  }).then(() => {
    ElMessage.success('操作成功')
    ctx._c.dispatch('ListPage', 'getData')
  })
}
export async function remove(ctx) {
  const row = ctx.props.row
  await ElMessageBox.confirm(`是否确定删除？`, '提示')
  deleteSubAccount({
    subAccountId: row.subAccountId
  }).then(() => {
    ElMessage.success('操作成功')
    ctx._c.dispatch('ListPage', 'getData')
  })
}


const page = new ListPage('SubAccountDistribution');

page
  .api(getCustomerSubAccountPage)
  .useSearch()
  .addInputItem('keyword', '子账号名称/ 客户名称/店铺名称')
  .addItem({ prop: 'customerName', label: '客户名称' })
  .addItem({ prop: 'accountName', label: '子账号名称' })
  .addItem({ prop: 'shopName', label: '店铺名称' })
  .addItem({ prop: 'name', label: '客服姓名' })
  .addItem({ prop: 'flowerName', label: '客服花名' })
  .addItem({ prop: 'no', label: '客服工号' })
  .addItem({ prop: 'mobile', label: '客服手机号' })
  .addItem({ prop: 'groupNo', label: '客服编队' })
  // .addDatePicker({ prop: 'endDateS', label: '结束日期晚于' })
  .useDatePicker({ prop: 'endDateS', label: '结束日期晚于' }).disabled(props => {
    return props.data.searchStatus === '1'
  }).upto('PageSearch')
  .addSelect({
    prop: 'searchStatus', label: '分配记录', default: '1', clearable: false, onChange: () => {
      const search = page.get('PageSearch')
      const searchRef: any = search.instance.$refs.custom
      const query = searchRef.query
      if (query.searchStatus === '2') {
        query.endDateS = dayjs().subtract(60, 'day').format('YYYY-MM-DD')
      } else {
        query.endDateS = ''
      }
      page.dispatch('ListPage', 'getData')
    }
  }, searchStatusOption)
  .end()
  .useTable()
  .setProp('class', 'deep-border')
  .setProp('spanMethod', spanMethod)
  .setProp('width', '100%')
  .setProp('height', 710)
  .useColumn({ prop: '_index', label: '#', align: 'center', width: 50, fixed: 'left' }).end()
  .useColumn({ prop: 'customerName', fixed: 'left' }).label('客户名称').minWidth(120).end()
  .useColumn({ prop: 'platformName', fixed: 'left' }).label('平台').end()
  .useCustomColumn(LinkColumn, { prop: 'shopName', linkProp: 'shopLinkUrl', linkType: 'link', fixed: 'left' }).label('店铺名称').minWidth(140).sortable().end()
  .useColumn('shopGroup').label('店铺分组').minWidth(140).end()
  .useColumn('shopTypeName').label('店铺类目').minWidth(140).end()
  .useColumn('serviceShiftName').label('班次').minWidth(160).end()
  .useColumn('customTypeName').label('客服类型').minWidth(140).end()
  .useColumn('consultPeopleNum').label('约定咨询量').minWidth(160).end()
  .useColumn('conversionRate').label('约定转化率').minWidth(160).end()
  .useColumn('responseSecond').label('约定响应时间').minWidth(160).end()


  .useColumn('accountName').label('子账号名称').minWidth(160).end()
  .useColumn('companyBaseSalary').label('分摊底薪').minWidth(160).end()
  .useColumn('commissionRatio').label('提成比例').percent().minWidth(160).end()
  .useColumn('name').label('客服姓名').minWidth(160).end()
  .useColumn('flowerName').label('客服花名').minWidth(160).end()
  .useColumn('companyName').label('分部客服').minWidth(160).end()
  // .useColumn('customPostTypeName').label('岗位类别').minWidth(160).end()



  .useColumn('startDate').label('开始日期').minWidth(160).end()
  .useColumn('endDate').label('结束日期').minWidth(160).end()
  .useColumn('confirmStatus').label('客服确认').formatter(row => ['待确认', '已确认'][row.confirmStatus]).minWidth(160).end()
  .useColumn('createUserName').label('分配人').minWidth(140).sortable().end()
  .end()
  .usePagination()
  .end()
  .useAuthButton()
  .useItem('export').content('导出数据').exportExcel().end()
  .end()
  .useAuthColumn({ width: 300 })
  .useItem('edit').content('修改')
  .show((row, query) => query.searchStatus === '2' && row.subStatus !== 2)
  .disabled((row) => row.confirmStatus === 1)
  .editRow(dispatchEditDialog).end()
  .useItem('edit-log').content('修改记录')
  .show((row, query) => query.searchStatus === '2' && row.subStatus !== 2)
  .editRow(dispatchLogDialog).end()
  .useItem('revoke').content('撤销')
  .show((row, query) => query.searchStatus === '2' && row.subStatus !== 2)
  .disabled((row) => row.confirmStatus === 1)
  .action(revoke).end()
  .useItem('remove').content('删除')
  .show((row, query) => query.searchStatus === '2' && row.subStatus !== 2)
  .action(remove).end()
  .useItem('dispatch')
  .show(row => row.subStatus !== 2)
  .content('分配客服').editRow(dispatchAccountDialog).end()
  .useItem('dispatch-all')
  .show(row => row.subStatus !== 2 && row.accountNo)
  .content('分配客服').editRow(dispatchAccountAllDialog).end()
  .useItem('temporary-handler')
  .content('临时处理人').editRow(temporaryHandlerDialog).end()

export default page
